@charset "utf-8"; 
.purchase{
	ul{
		list-style: none !important;
	}
	padding-top: 59px; 
	.purchaseMain{
	  .p_caseTop{
		  height: 500px;
		  >h1{
			  color: #fff;
			  text-align: center;
			      font-weight: bolder;
			      font-size: 36px; 
			      letter-spacing: .68px;
			      line-height: 40px; 
			      margin-bottom: 49px;
				  padding-top: 80px;
		  }
	  }
	  .p_case_box_00{
		  background: #f8f8f8;
		  padding: 0 0 70px;
		  display: flex;
		  flex-direction: row;
		  justify-content: center;
		  .p_case_box_00Main{
			  width: 980px; 
			  margin-top: -300px;
			  display: flex;
			  flex-direction: row;
			  justify-content: space-between;
			  >li{ 
				      width: 310px; 
				      background: #fff;
				      border: 1px solid #d7dce8;
				      border-radius: 8px;
				      box-shadow: 0 0 10px #ccc;
					  overflow: hidden;
					  .top{
						      padding: 0 40px 50px;
						      //background-image: linear-gradient(180deg,#efddc1,#dbb98d);
							  background: #fff;
						      box-shadow: 0 0 16px #efefef;
						      border-radius: 8px 8px 0 0;
						      min-height: 316px;
							  position: relative;
							  >h1{
								      padding-top: 40px;
								      text-align: center;
								      font-weight: bolder;
								      font-size: 26px;
								      color: #06070d;
								      letter-spacing: .49px;
								      line-height: 26px;
								      margin-bottom: 52px;
							  }
							  .txt{    
								  margin-bottom: 34px;
								  .txt_00{
									  display: flex;
									  flex-direction: row;
									  justify-content: center;
									  align-items: flex-end;
									  span{
										  display: block;
										      font-weight: bolder;
										      font-size: 24px;
										      color: #06070d;
										      letter-spacing: .46px;
										      line-height: 24px;
									  }
									  strong{
										  display: block;
										      font-weight: bolder;
										      font-size: 60px;
										      color: #f0453e;
										      letter-spacing: 1.14px;
										      line-height:50px;
									  }
								  }
							  
									
							  }
							  
							  .space{
								      font-weight: 700;
								      width: 100%;
								      text-align: center;
								      padding-top: 15px;
								      margin-bottom: 10px;
								      min-height: 21px;
							  }
							  .space_0{
								  height: 16px;
							  }
							  .price{
							  	    font-size: 16px; 
							  	    letter-spacing: .3px;
							  	    line-height: 16px; 
							  	    text-decoration: line-through;
							  	    color: #666;
							  		text-align: center;
							  		font-weight: bolder;
							  }
							  .btn_00{
								  border: 1px solid #DBB98D;
								      border-radius: 4px;
								      font-weight: bolder;
								      font-size: 20px;
								      color: #dbb98d;
								      letter-spacing: .38px;
								      line-height: 52px;
								      text-align: center;
								      display: block;
								      cursor: pointer;
							  }
							  
							  .gray{
								  // filter: grayscale(100%);
								  border: 1px solid #818181 !important;
								      color: #818181 !important;
							  }
							  
							  .black{
								      background: #1e1e1e !important;
									  border-color: #1e1e1e !important;
							  }
							  
							  .txt_01{
								  h1{
									      font-size: 24px;
									      height: 66px;
									      line-height: 85px;
									      font-weight: 700;
									      color: #818181;
										  text-align: center;
								  }
							  }
							  
							  .beizhu{
								      font-size: 12px;
								      color: #666;
								      letter-spacing: .23px;
								      text-align: center;
									  line-height: 24px;
									  position: absolute;
									  left: 0;
									  right: 0;
									  bottom: 20px;
									  width: 100%; 
							  }
					  }
			
					   
					   .bg_00{
					   	    background-image: linear-gradient(180deg,#efddc1,#dbb98d);				  
					   }	
					   
					 .bot{
						padding: 37px 40px 10px;
						min-height: 487px;
						font-size: 14px;
						color: #06070d;
						letter-spacing: .27px;
						.botTitle{
							width: 228px;
							height: 16px;
							position: relative;
							display: flex;
							flex-direction: row;
							justify-content: center; 
							    margin-bottom: 30px;
							span{
								display: block; 
								    font-size: 16px;
								    color: #1e1e1e;
								    letter-spacing: .3px;
								    line-height: 16px;
									padding: 0 15px;
									position: relative;
									z-index: 1;
									background: #fff;
							}
						}
						
						.botTitle:after{
							content: "";
							position: absolute;
							top: 0;
							bottom: 0;
							margin: auto;
							left: 0;
							width: 100%;
							height: 1px;
							background: #f2f2f2;
						}
					 
						.botMain{
							li{
								    margin-bottom: 30px;
								.txt{ 
									display: flex;
									flex-direction: row;
									justify-content: space-between;
									.le{
										    font-size: 14px;
										    color: #06070d;
										    letter-spacing: .27px;
											line-height: 18px;
									}
									.ri{
										    font-size: 14px;
										    color: #06070d;
										    letter-spacing: .27px;
											line-height: 18px;
									}
								}
								
								.tag_00{
									display: flex;
									flex-direction: row;
									justify-content: space-between;
									.le{
										    font-size: 14px;
										    color: #d4d6da;
										    letter-spacing: .27px;
											line-height: 18px;
									}
									.ri{
										    display: flex;
											flex-direction: column;
											justify-content: center; 
											height: 18px;
											img{
												display: block;
												width: 15px;
												height: 15px;
											}
									}
								}
								.tag_01{
									display: flex;
									flex-direction: row;
									justify-content: space-between;
									.le{
										    font-size: 14px;
										    color: #06070d;
										    letter-spacing: .27px;
											line-height: 18px;
									}
									.ri{
										    display: flex;
											flex-direction: column;
											justify-content: center; 
											height: 18px;
											img{
												display: block;
												width: 15px;
												height: 15px;
											}
									}
								}
								
								.text{
									display: flex;
									flex-direction: row;
									justify-content: center;
									span{
										display: block;
										    font-size: 14px;
										    color: #606266;
										    letter-spacing: .27px;
											line-height: 18px;
									}
								}
							}
						}
					 
					 }  
			}
		  }
	  }
	
	  .p_case_box_01{
		 padding:80px 0 50px;
		 >h3{
			 font-weight: normal;
			 text-align: center;
			     font-size: 21px;
			     color: #fff;
			     letter-spacing: .4px;
				 line-height: 30px;
		 }
		 
		 ul{
			 display: flex;
			 flex-direction: row;
			 justify-content: space-between;
			 flex-wrap: wrap;
			 margin-top: 30px;
			 li{
				     border-radius: 8px;
				     width: 246px;
				     height: 254px;
					 background: #fff;
					 margin-top: 20px;
					 position: relative;
					 overflow: hidden;
					 .ceng_00{
						 height: 100%; 
						 display: flex;
						 flex-direction: column;
						 justify-content: center;
						 align-items: center;
						 .img{
							 width: 72px;
							 height: 76px;
							 display: flex;
							 flex-direction: row;
							 justify-content: center;
							 align-items: center;
							 img{
								 display: block;
								 max-width: 100%;
								 max-height: 100%;
							 }
						 }
						 
						 h1{
							 font-weight: normal;
							     font-size: 18px;
							     color: #303133;
							     letter-spacing: .34px;
							     text-align: center;
							     margin-top: 15px;
						 }
						 h3{
							 font-weight: normal;
							     font-size: 12px;
							     color: #606266;
							     letter-spacing: .23px;
							     text-align: center;
							     margin-top: 15px;
						 }
						 h6{
							 font-weight: normal;
							 text-align: center;
							     font-size: 21px;
							     color: #dbb98d;
							     letter-spacing: .4px;
							     margin-top: 10px;
						 }
					 }
					 .ceng_01{
						 position: absolute;
						 top: 50%;
						 left: 0;
						 width: 100%;
						 height: 100%;
						 background: rgba(0,0,0,.2);
						 display: flex;
						 flex-direction: row;
						 justify-content: center;
						 align-items: center;
						 transition: .3s;
						 opacity: 0;
						 .btn{
							     width: 206px;
							     height: 40px;
							     line-height: 40px;
							     text-align: center;
							     background: #fff;
							     box-shadow: 0 0 6px rgba(0,0,0,.1);
							     border-radius: 4px;
							     cursor: pointer;
						 }
					 }	
			 } 
			 
			 li:hover{
				 .ceng_01{
					top: 0; 
					opacity: 1;
				 }
			 }
		 }
	  }		
	
	  .p_case_box_02{
		  padding: 100px 0;
		  h1{
			      font-size: 40px;
			      letter-spacing: .76px;
			      line-height: 40px;
			      text-align: center;
			      padding-bottom: 50px;
				      color: #06070d;
		  }
		  
		  .p_case_box_02Main{
			  width: 980px; 
			  margin: 0 auto;
			  display: flex;
			  flex-direction: row;
			  justify-content: space-around;
			  flex-wrap: wrap;
			  li{
				  width: 284px;
				  height: 150px; 
				  margin-bottom: 30px;
				  .ques{
					      font-size: 16px;
					      color: #06070d;
					      letter-spacing: .38px;
					      line-height: 20px;
					      margin-bottom: 10px;
						  font-weight: bolder;
				  }
				  .ans{
					      font-size: 13px;
					      color: #5c5c5c;
					      letter-spacing: .3px;
					      line-height: 24px;
						  font-weight: bolder;
						  a{
							      color: #66b1ff;
						  }
				  }
			  }
		  }
	  }	
	 
	}
}


@media screen and (max-width:980px) and (min-width:768px){
 
}


@media screen and (max-width:767px){
	.purchase{
		.purchaseMain{
			.p_case_box_00{
				.p_case_box_00Main{
					align-items: center;
					flex-direction: column;
					>li{
						margin-bottom: 30px;
					}
				}
			}
			
			.p_case_box_01{
				ul{
					justify-content: space-around;
				}
			}
			
			.p_case_box_02{
				.p_case_box_02Main{
					justify-content: space-around;
					width: auto;
				}
			}
		}
	}
}